flex有自己的對齊方式，
justify-content:依照目前Main axis進行對齊
justify-content:flex-start;以Main axis的起點對齊(默認)
justify-content:flex-end;以Main axis的終點對齊

 body{display: flex;flex-flow:row-reverse wrap; column-gap:10px;height: 400px;justify-content: flex-end;}

將Main axis反向的flex-end

Main axis為縱向的flex-end


將Main axis反向的flex-end

justify-content:center以Main axis的中心對齊
Main axis:row

Main axis:column

justify-content:space-between;物件兩邊貼齊邊框，其餘的物件平分間距

Main axis:row左右貼齊


Main axis:column上下貼齊

justify-content:space-around不貼齊邊框，物件平分間距
Main axis:row


Main axis:column

justify-content:space-evenly，連同左右邊距一起共同平分間距
Main axis:row


Main axis:column

align-items:以cross axis來對齊

body{display: flex;flex-flow:row wrap; column-gap:10px;height: 400px;border:2px solid black;align-items: flex-end;}

Main axis現在是row，cross axis就是column
所以align-item:flex-end才會是貼齊底下


Main axis:column


Main axis:column-reverse


Main axis:row-reverse

align-items:center以cross line的中心為準
Main axis:row

Main axis:column

align-items:base-line基線對齊，物間的中心點對準基線排列

align-items:stretch，讓物件往crossline自動填充，如果cross axis方向是row則，有設定width的物件不受影響，cross axis方向是column，有設定height的物件不受影響
Main axis:row


Main axis:column


align-self用在flex容器包裹物件上，可以讓物件不會受到容器的align-items影響給,div2設上align-self:flex-start，讓div2自己到cross axis的起點，跟其他兄弟分開

<div style="background-color:pink;align-self: flex-start;">div2</div>